/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList, InputDatalist, InputIdProvider,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import { objNestSet} from "../../../common/tool";
import {Dispatch, SetStateAction} from "react";

interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
}

//全面检验报告附页  拆分2部分
//常见模型：承压类的宏观检查 {特别的配置 } ，后的第三个字段标识：是否标题也是手工录入的？
export const item宏观检验o = [['封头型', {t: '封头型式、筒体与封头的连接方式', pr: '结构检验', span: 5},],
    ['开孔位', {t: '开孔位置及补强',},],
    ['焊缝布', {t: '焊缝布置',},],
    ['支承型', {t: '支座的型式与布置',},],
    ['排放装', {t: '排污口设置',},],
    ['内径差', {t: '罐体同一断面上最大内径与最小内径之差', pr: '几何尺寸检验', span: 5}],
    ['错边量', {t: '纵（环）焊缝最大对口错边量' ,u:'mm' }],
    ['棱角度', {t: '纵（环）焊缝最大棱角度',}],
    ['大咬边', {t: '纵（环）焊缝最大咬边',}],
    ['大余高', {t: '焊缝最大余高' }],
    //单位,u:null重置单位；    若是遇到拆分的考虑重新配置，u参数针对同一个编辑器区域的。
    ['铭牌', {t: '表面漆色、铭牌和标志', pr: '罐体外观检验', span: 8 ,u:null}],
    ['泄漏', {t: '裂纹、泄露、鼓包、变形、机械接触损伤'}],
    ['表腐蚀', {t: '内外表面的腐蚀'}],
    //怪没用span? 【编辑器在pr的中间分成了两个区域来做编辑的】span==0表示td不拆分 但是前缀pr也可针对不同编辑器区域的，再做冗余设置
    ['固螺栓', {t: '法兰密封面及其紧固螺栓', pr: '罐体外观检验', span: 0}],
    ['板罐连', {t: '罐内防波板与罐体的连接'}],
    ['固定连', {t: '罐内气（液）相管、液位计固定导架、排污疏水装置等与罐体的固定连接'}],
    ['附件口', {t: '附件与罐体的接口'}],
    ['结霜露', {t: '真空绝热罐体结霜结露、油漆脱落、夹层珠光砂的沉降'}],
    ['底盘连', {t: '罐体与底盘连接检验', pr: null }],
    ['附属连', {t: '附属设施连接检验', pr: null }],
    ['隔热', {t: '隔热层检验', pr: null }],
    ['导静电', {t: '导静电装置', pr: '附件检验', span: 5}],
    ['装卸阀', {t: '装卸阀门'}],
    ['快接头', {t: '快装接头'}],
    ['气相接', {t: '气（液）相接管'}],
    ['他附件', {t: '其他附件'}],
    ['安全阀', {t: '安全阀', pr: '安全附件检验', span: 6}],
    ['爆破片', {t: '爆破片装置'}],
    ['压力表', {t: '压力表'}],
    ['液位计', {t: '液位计'}],
    ['测温仪', {t: '测温仪表'}],
    ['切断装', {t: '紧急切断装置'}],
    ['卸液信', {t: '定点卸液信息跟综、反馈装置', pr: null }],
    ['组装', {t: '组装检验', pr: null }],
    ['氨检漏', {t: '氨检漏试验', pr: null }],
    ['油漆', {t: '罐体外表面油漆检验', pr: null }],
    ['宏他1', {pr: null }, true],
    ['宏他2', {pr: null }, true],
    ['宏他3', {pr: null }, true],
    ['宏他4', {pr: null }, true],
    ['宏他5', {pr: null }, true],
    ['宏他6', {pr: null }, true],
    ['宏他7', {pr: null }, true],
    ['宏他8', {pr: null }, true]
];

export const itemA宏观检验: string[] = ['宏观结果'];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    itemA宏观检验.push(name as string);
});
const 检验结果选=['√','无此项','——','×'];
/**宏观检验报告-结构几何尺寸 : 拆成两半 1-15条 idx<15的；
 * */
export const Structural =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA宏观检验,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                            nestMd={nestMd} alone={alone} label={label!}>
             <Text>{label}：</Text>
             <Macroscopic inp={inp} setInp={setInp} from={0} to={21}/>
    </InspectRecordLayout>;
});
/**宏观检验报告 后一半的编辑器-壳体外观 : 剩下的idx>=15的；
 * */
export const ShellAppearance =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    //共用的 “itemA宏观检验” 两个编辑器都会提取字段的。
    const [getInpFilter] = useMeasureInpFilter(null, itemA宏观检验,);
    const {inp, setInp} = useItemInputControl({ref});
    let oldPrefic='';
    let oldunit='';
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text>{label}：</Text>
        <Macroscopic inp={inp} setInp={setInp} from={21}  to={item宏观检验o.length}/>
        <Text variant="h4">说明：</Text>
        <TextArea  value={inp?.宏观结果 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 宏观结果: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});
interface MacroscopicProps extends InternalItemProps {
    inp: any,
    setInp: Dispatch<SetStateAction<any>>,
    /**起点的所索引号 0开*/
    from: number;
    /**不包含这最后一个的*/
    to: number;
}
/**还是抽取出 可公用的代码为好。
 * */
const Macroscopic= ({inp, setInp,from,to} : MacroscopicProps
) => {
    let oldPrefic='';
    let oldunit='';
    return <>
        { item宏观检验o.map(([name,conf,adddesc]: any, i:number) => {
            if(i<from || i>=to)  return null;
            const {t: title, pr: prefix, span,u:unit}=conf;
            oldPrefic=prefix? prefix: null===prefix? '' : oldPrefic;             //配置可继承性
            oldunit=unit===null? '' : unit? unit:oldunit;
            return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                    <Text>项目{i + 1} - {oldPrefic} {'>'} {title}：</Text>
                    {adddesc && <InputLine label={'可增加的检验项目的标题'} css={{width: 'max-content'}}>
                        <Input value={inp?.[name]?.a || ''} size={16} style={{display: 'inline-flex',}}
                               onChange={e => objNestSet(name, 'a', e.currentTarget.value || undefined, inp, setInp)}/>
                    </InputLine>
                    }
                    &nbsp;
                        <div>
                            检查结果
                            <InputIdProvider>
                                <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                               style={{display: 'inline-flex', width: '11rem'}}
                                               onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                            </InputIdProvider>
                            {oldunit}
                        </div>
                        <div css={{display: 'inline-flex',alignItems: 'center'}}>
                            &nbsp;备注
                            <BlobInputList value={inp?.[name]?.m || ''} datalist={['见结果栏']}
                                           style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                           onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                        </div>
                    </div>
            </React.Fragment>);
        })}
        <hr/>
        注：检验结果栏中，打“√”的 表示无问题或者合格的检验项目，打“×”的表示有问题或者不合格的检验项目，填写“无 此项”的表示实际没有的检验项目，划“—”的表示无法检验的项目。
    </>;
};
